<template name="touchView">
    <view>
        <view class="container" @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :style="{left: leftStyle + 'rpx'}">
            <view>
                <slot></slot>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: "touchView",
    data() {
        return {
            leftStyle: 0,
            startX: 0,
            hiddenFlag: true,
            delBtnWidth: 150,
        };
    },
    methods: {
        hide() {
            this.leftStyle = 0;
        },
        // 开始移动时
        touchS({ touches }) {
            // startX记录开始移动的位置
            if (touches.length === 1) {
                this.startX = touches[0].clientX;
            }
            // hiddenFlag为true则是从右向左，为false则是从左向右
            if (this.leftStyle === 0) {
                this.hiddenFlag = true;
                this.$emit("clearTouch")
            } else {
                this.hiddenFlag = false;
            }

        },
        touchM({ touches }) {
            if (touches.length === 1) {
                //手指移动时水平方向位置
                const moveX = touches[0].clientX;
                this.moveFunc(moveX);
            }
        },
        touchE({ touches }) {
            const { leftStyle } = this;
            const { delBtnWidth } = this;
            // 如果停止滑动的距离大于二分之一则直接弹出删除按钮，不然则left为0
            if (-leftStyle > delBtnWidth / 2) {
                this.leftStyle = -delBtnWidth;
            } else {
                this.leftStyle = 0;
            }
        },
        moveFunc(moveX) {
            // 原始位置向左，leftStyle为小于0；原始位置向右，leftStyle为大于0
            // disX为相对最初位置的左右距离
            // 大于0为向右，小于0为向左
            const disX = moveX - this.startX;
            const delBtnWidth = this.delBtnWidth;
            let offsetNum = 0;
            if (-disX >= delBtnWidth && this.leftStyle === -delBtnWidth) {
                return;
            }
            // this.hiddenFlag为true则是从左到右，则应该将container向左移动
            // this.hiddenFlag为false则是从右向左，则应该将container向右移动
            if (this.hiddenFlag) {
                // 此时container为最右边，则应该将container向左移动
                // disX大于0为相对原始位置的向右移动，则直接将offsetNum置为0
                // 否则为向左移动，offsetNum为disX相反的值，判断是否超过设置的最大位置
                if (disX == 0 || disX > 0) {
                    offsetNum = 0;
                } else {
                    offsetNum = disX;
                    if (disX <= -delBtnWidth) {
                        //控制手指移动距离最大值为删除按钮的宽度
                        offsetNum = -delBtnWidth;
                    }
                }
            } else {
                // 此时container为最左边，应该向右移动
                // disX小于0为相对原始位置的向左移动，则直接将offsetNum置为-this.delBtnWidth
                // 否则为相对原始位置的向右移动，此时应该将最大位置与向右位置的差值为此刻位置，判断是否为大于0
                if (disX < 0) {
                    offsetNum = -this.delBtnWidth;
                } else {
                    offsetNum = -this.delBtnWidth + disX;
                    if (offsetNum > 0) {
                        offsetNum = 0;
                    }
                }
            }
            this.leftStyle = offsetNum;
        }
    }
}
</script>

<style scoped>
.container {
    height: auto;
    position: relative;
    margin-top: 26rpx;
    /* border: 1rpx solid #d6dfff; */
    border-radius: 8rpx;
    /* background: #f5f7ff; */
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}
</style>